<template>
	<view>
		<uni-breadcrumb style="padding:15px;z-index:999">
			<uni-breadcrumb-item v-for="(route,index) in routes" :clickable="true" :key="index">
				<view style="color:#000;cursor:pointer;" @click.stop="breadcrumbClick($event,route)">
					{{route.groupName}}
				</view>
			</uni-breadcrumb-item>
		</uni-breadcrumb>
		<view v-if="sibling.length > 0" v-show="showMenu"
			:style="'position:absolute;z-index:1000;left:'+menuLeft+'px;top:'+menuTop+'px;border:1px solid #ccc;background:#fff;padding:5px;'">
			<uni-row class="demo-uni-row" v-for="(s,index) in sibling" :key="index" :title="s.groupName">
				<uni-col style="padding:5px;">
					<view @click="childClick(s)" class="demo-uni-col dark_deep" style="color:#333;cursor:pointer;">
						{{s.groupName}}</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>
<script>
	export default {
		name: "long-breadcrumb-menu",
		data() {
			return {
				showMenu: false,
				menuLeft: 0,
				menuTop: 0,
				sibling: [],
				routes: [{
					treeId: "",
					groupName: "根"
				}]
			}
		},
		props: {
			separator: {
				type: String,
				default: '/'
			},
			separatorClass: {
				type: String,
				default: ''
			},
			menuData: {
				type: Array,
				default: () => {
					return []
				}
			},
			select: {
				type: Function
			}
		},
		created() {
			if (this.menuData != undefined && this.menuData.length > 0) {
				for (let i = 0; i < this.menuData.length; i++) {
					this.setParent(this.menuData[i]);
				}
			}
		},
		methods: {
			setParent(tree) {
				if (tree.children != null && tree.children.length > 0) {
					for (let i = 0; i < tree.children.length; i++) {
						tree.children[i].pid = tree.treeId;
						if (tree.children[i].children != undefined && tree.children[i].children.length > 0) {
							this.setParent(tree.children[i]);
						}
					}
				}
			},
			breadcrumbClick(e, item) {
				if (this.showMenu) {
					this.showMenu = false;
					return;
				}
				this.menuTop = e.target.offsetTop + 20;
				this.menuLeft = e.target.offsetLeft;
				this.showMenu = true;
				this.sibling.length = 0;
				this.getSlibling(this.menuData, item.treeId);
			},
			getSlibling(tree, treeId) {
				if (treeId == undefined || treeId == null || treeId == "") {
					this.menuData.forEach(c => {
						this.sibling.push(c);
					})
				} else {
					if (tree != undefined) {
						tree.forEach(c => {
							if (c.treeId == treeId) {
								if (c.children != undefined && c.children.length > 0) {
									c.children.forEach(cc => {
										this.sibling.push(cc);
									})
								}
							} else {
								if (c.children != undefined &&
									c.children.length > 0
								) {
									this.getSlibling(c.chidlren, c.treeId);
								}
							}
						})
					}
				}
			},
			findTreeItem(tree, id) {
				for (let i = 0; i < tree.length; i++) {
					if (tree[i].treeId == id) {
						let findItem = tree[i]
						return findItem;
					} else {
						if (tree[i].children != undefined && tree[i].children.length > 0) {
							let findItem = this.findTreeItem(tree[i].children, id);
							if (findItem) {
								return findItem;
							}
						}
					}
				}
				return false;
			},
			pushParents(item) {
				if (item.pid != undefined && item.pid != null && item.pid != "") {
					let parent = this.findTreeItem(this.menuData, item.pid);
					if (parent) {
						this.pushParents(parent);
					}
				}
				this.routes.push(item);
			},
			childClick(item) {
				this.routes = [{
					treeId: "",
					groupName: "根"
				}]
				this.pushParents(item);
				this.showMenu = false;
				if (this.select != undefined) {
					this.select(item);
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>